<template>
	<view class="bgColor-white">
		<cu-custom bgColor="bg-gradual-blue-light" :isBack="true" backText="返回" title="添加银行卡"></cu-custom>
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="cu-form-group margin-top-sm" style="justify-content:center; text-align:center;">
					<text style="font-size: 32rpx;padding-bottom: 50rpx;">请绑定持卡人本人的银行卡</text>
				</view>
				<zh-text labelAlign="left" label="持卡人" labelWidth="150rpx" :value="fullName"  rightIconClass="icon cuIcon-question" @right-icon-click="showMessage"></zh-text>
				<zh-picker
					labelAlign="left"
					labelWidth="150rpx"
					label="开户行"
					pickerRef="bank"
					mode="selector"
					:options="bankData"
					placeholder="请选择所属银行"
					@pickerChange="onBankChange($event)"
					:defaultProps="{label:'dictValue',value:'dictKey'}"
					ref="bank"
				></zh-picker>
				<zh-input
					type="number"
					labelWidth="150rpx"
					label="卡号"
					labelAlign="left"
					v-model="cardCode"
					maxlength="50"
					placeholder="请输入您的卡号"
					rightIconClass="icon cuIcon-scan"
					@right-icon-click="gotoScanFrame"
				></zh-input>
				<zh-input v-model="cellphone" labelWidth="230rpx"  type="number" label="银行预留手机号" placeholder="请输入预留在银行的手机号码" labelAlign="left" ></zh-input>
				<zh-input
					type="number"
					labelWidth="150rpx"
					labelAlign="left"
					maxlength="4"
					label="验证码"
					v-model="shortMsgCode"
					:rightButtonFlag="true"
					:rightButton="{ disabled: !codeClick, text: codeBut, bg: 'bg-blue' }"
					@right-button-click="getCode"
					placeholder="请输入手机验证码"
				></zh-input>
				<view v-if="sendSessuss"  style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;padding: 20rpx 20rpx 20rpx 20rpx;">
					<text class="icon cuIcon-info" style="font-size: 32rpx;padding-right: 10rpx;"></text>
					<text style="font-size: 30rpx;">短信验证码已发送到您在开卡银行留的手机号码上</text>
				</view>
				<view class="padding flex flex-direction justify-center"><button class="cu-btn bg-blue-light lg" style="font-size: 35rpx;" @tap.stop="improve">提交</button></view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :animation="false">
			<view style="background-color: #fff;padding: 20rpx 20rpx 20rpx 40rpx;">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;height: 100rpx;">
					<text style="font-size: 32rpx;">持卡人说明</text>
				</view>
				<view style="display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;">
					<text style="padding-right: 10rpx;">1.</text><text>为了资金安全,只能添加同一身份下的银行卡。</text>
				</view>
				<view style="display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;">
					<text style="padding-right: 10rpx;">2.</text><text>如需添加其他此卡人的银行卡,请注册其他身份证账号。</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import api from '@/api/society/my/bankCard.js';
import commonApi from '@/api/system/common.js';
import reqConfig from '@/common/config/reqConfig.js';
import store from '@/store';
export default {
	onReady() {
		const data = {};
		data.dictField='bankCode';
		this.$http
			.post(commonApi.getDict, data)
			.then(res => {
				this.bankData = res.result
			}).catch(error => {
				
			});
	},
	data() {
		return {
			isCard: false,
			fullName: store.state.hh_user.fullName,
			bankCode: '',
			cardCode: '',
			cardType: '',
			cellphone:'',
			shortMsgCode:null,
			code: '',
			bankData:[],
			sendSessuss:false,
			codeClick: true,
			codeBut: '获取验证码',
			codeTimer: '' //验证码定义一个定时器的变量
		};
	},
	methods: {
		improve(e) {
			if(!this.bankCode){
				uni.showToast({
				  icon: 'none',
				  title: '请输入所属银行',
				duration:2000
				})
				return
			}
			if(!this.cardCode){
				uni.showToast({
				  icon: 'none',
				  title: '请输入银行卡号',
				duration:2000
				})
				return
			}
			if (!this.$validate.isBankCard(this.cardCode)) {
			  uni.showToast({
			    icon: 'none',
			    title: '请输入正确的银行卡号',
				duration:2000
			  })
			  return
			}
			if(!this.cellphone){
				uni.showToast({
				  icon: 'none',
				  title: '请输入银行预留的手机号码',
				duration:2000
				})
				return
			}
			if (!this.$validate.isPhone(this.cellphone)) {
			  uni.showToast({
			    icon: 'none',
			    title: '请输入正确的手机号',
				duration:2000
			  })
			  return
			}
			if(!this.shortMsgCode){
				uni.showToast({
				  icon: 'none',
				  title: '请输入短信验证码',
				duration:2000
				})
				return
			}
			const data = {};
			data.fullName = this.fullName;
			data.cardCode = this.cardCode;
			data.bankCode = this.bankCode;
			data.cardType = this.cardType;
			data.shortCode = this.shortMsgCode;
			this.$http
				.post(api.addcard, data)
				.then(res => {
					this.$Router.back(1)
				}).catch(error => {
					
				});
		},
		onBankChange(e) {
			this.bankCode = e.value;
		},
		getCode() {
			var _that = this;
			_that.sendSessuss = false;
			// 倒计时
			if (_that.codeClick) {
				
				if(!_that.bankCode){
					uni.showToast({
					  icon: 'none',
					  title: '请输入所属银行',
					duration:2000
					})
					return
				}
				if(!_that.cardCode){
					uni.showToast({
					  icon: 'none',
					  title: '请输入银行卡号',
					duration:2000
					})
					return
				}
				if (!this.$validate.isBankCard(_that.cardCode)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的银行卡号',
					duration:2000
				  })
				  return
				}
				if(!_that.cellphone){
					uni.showToast({
					  icon: 'none',
					  title: '请输入银行预留的手机号码',
					duration:2000
					})
					return
				}
				if (!this.$validate.isPhone(_that.cellphone)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的手机号',
					duration:2000
				  })
				  return
				}
				// 发送短信
				const sendData = {};
				sendData.fullName = this.fullName;
				sendData.cardCode = this.cardCode;
				sendData.bankCode = this.bankCode;
				sendData.cellphone = this.cellphone;
				sendData.cardType = this.cardType;
				this.$http
					.post(api.checkBankCard, sendData)
					.then(res => {
						_that.codeClick = false;
						_that.sendSessuss = true;
						// 倒计时开始
						var daojishi = 60;
						_that.codeTimer = setInterval(function() {
							_that.codeBut = '重新发送' + daojishi;
							daojishi--;
							if (daojishi <= 0) {
								_that.codeBut = '重新发送';
								_that.codeClick = true;
								clearInterval(_that.codeTimer);
							}
						}, 1000);
					})
					.catch(error => {});
			}
		},
		gotoScanFrame: function() {
			this.$Router.push({ name: 'scanFrame' });
		},
		showMessage(){
			this.$refs.popup.open()
		}
	},
	beforeDestroy() {
		if (this.codeTimer) {
			clearInterval(this.codeTimer); // 在Vue实例销毁前，清除我们的定时器
		}
	}
};
</script>

<style></style>
